<div class="container filter">
  <form nz-form [formGroup]="searchForm" (ngSubmit)="onSubmit()">
    <div>
      <i nz-icon nzType="search" nzTheme="outline" class="card-title"></i>
      <span class="card-title">筛选搜索</span>
      <button type="submit" nz-button nzType="primary" style="float: right;"> 查询结果 </button>
    </div>
    <div nz-row nzGutter=24 style="margin-top: 16px;">
      <div nz-col nzSpan=5 nzOffset=1>
        <nz-form-item>
          <nz-form-label nzFor="adminName">
            输入搜索
          </nz-form-label>
          <nz-form-control>
            <input nz-input formControlName="adminName" placeholder="账号/姓名">
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
  </form>
</div>

<div class="container operate">
  <i nz-icon nzType="profile" nzTheme="outline" class="card-title"></i>
  <span class="card-title">数据列表</span>
  <button nz-button style="float: right;" nzSize="small" (click)="handleAdd()"> 添加 </button>
</div>

<div class="table-container">
  <nz-table #userTable nzSize="small" [nzData]="adminList" [nzFrontPagination]="false" [nzShowPagination]="false"
    nzBordered [nzLoading]="tableLoading">
    <thead>
      <tr>
        <th nzAlign="center" nzWidth="6%">编号</th>
        <th nzAlign="center" nzWidth="16%">账号</th>
        <th nzAlign="center" nzWidth="16%">姓名</th>
        <th nzAlign="center" nzWidth="16%">邮箱</th>
        <th nzAlign="center" nzWidth="10%">添加时间</th>
        <th nzAlign="center" nzWidth="10%">最后登陆</th>
        <th nzAlign="center" nzWidth="8%">是否启用</th>
        <th nzAlign="center">操作</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of userTable.data">
        <td nzAlign="center">{{data.id}}</td>
        <td nzAlign="center">{{data.username}}</td>
        <td nzAlign="center">{{data.nickName}}</td>
        <td nzAlign="center">{{data.email}}</td>
        <td nzAlign="center">{{data.createTime | date:' yyyy-MM-dd HH:mm:ss'}}</td>
        <td nzAlign="center">{{data.loginTime | date:' yyyy-MM-dd HH:mm:ss'}}</td>
        <td nzAlign="center">
          <nz-switch [(ngModel)]="data.status" [nzControl]="true" (click)="handleShowStatusClick(data.id)"
            [nzLoading]="activateStatusLoadingStatus.get(data.id)">
          </nz-switch>
        </td>
        <td nzAlign="center">
          <button nz-button nzType="link" (click)="handleAsiganRole(data.id)">分配角色</button>
          <button nz-button nzType="link" (click)="handleEdit(data)">编辑</button>
          <button nz-button nzType="link"
          nz-popconfirm
          nzPopconfirmTitle="确定删除该用户?"
          nzOkText="确定"
          nzCancelText="取消"
          (nzOnConfirm)="handleDelete(data.id)"
          (nzOnCancel)="cancelDelet()"
          >删除</button>
        </td>

      </tr>
    </tbody>
  </nz-table>
</div>

<div class="pagination-container">
  <nz-pagination [(nzPageIndex)]="pageIndex" [(nzPageSize)]="pageSize" [nzTotal]="total"
    [nzPageSizeOptions]="[10, 15,20]" nzShowQuickJumper nzShowSizeChanger [nzShowTotal]="totalTemplate"
    (nzPageIndexChange)="handlePageIndexChange()" (nzPageSizeChange)="handlePageSizeChange()">
  </nz-pagination>
  <ng-template #totalTemplate let-total>共{{total}}条</ng-template>
</div>

<nz-modal [(nzVisible)]="isInfoVisible" [(nzTitle)]="inforFormTitle" (nzOnCancel)="handleCancel()"
  (nzOnOk)="handleModalOk()">
  <form nz-form [formGroup]="adminInfoForm">
    <nz-form-item>
      <nz-form-label nzSpan="6">
        账号
      </nz-form-label>
      <nz-form-control nzSpan="12">
        <input nz-input formControlName="username" id="username" />
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzSpan="6">
        姓名
      </nz-form-label>
      <nz-form-control nzSpan="12">
        <input nz-input formControlName="nickName" id="nickName" />
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzSpan="6">
        邮箱
      </nz-form-label>
      <nz-form-control nzSpan="12">
        <input nz-input formControlName="email" id="email" />
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzSpan="6">
        密码
      </nz-form-label>
      <nz-form-control nzSpan="12">
        <input type="password" nz-input formControlName="password" id="password" />
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzSpan="6">
        备注
      </nz-form-label>
      <nz-form-control nzSpan="12">
        <textarea rows="4" nz-input formControlName="note" id="note"> </textarea>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzSpan="6">
        是否启用
      </nz-form-label>
      <nz-form-control nzSpan="12">
        <nz-radio-group formControlName="status">
          <label nz-radio [nzValue]="1">是</label>
          <label nz-radio [nzValue]="0">否</label>
        </nz-radio-group>
      </nz-form-control>
    </nz-form-item>

  </form>
</nz-modal>
